<template>
  <view class="start-repair">
    <view class="info-content">
      <view class="info-main">
        <form @submit="formSubmit" @reset="formReset">
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">日期</view>
              <view class="item-content-input">
                <view class="uni-input">{{ date }}</view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">时间</view>
              <view class="item-content-input">
                <view class="uni-input">{{ time }}</view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">姓名</view>
              <view class="item-content-input">
                <input
                  class="uni-input uni-input-name"
                  name="name"
                  value="匿名"
                  placeholder="可匿名"
                />
              </view>
            </view>
          </view>

          <view class="uni-form-item uni-column">
            <view class="title title2">上报类型</view>
            <radio-group name="state">
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="投诉"
                />
                <text>投诉</text>
              </label>
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="举报"
                />
                <text>举报</text>
              </label>
            </radio-group>
            <!-- <checkbox-group name="checkbox">
              <label>
                <checkbox
                  value="水管"
                  checked="true"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />水管
              </label>
              <label>
                <checkbox
                  value="煤气"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />煤气
              </label>
              <label>
                <checkbox
                  value="电路"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />电路
              </label>
              <label>
                <checkbox
                  value="其他"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />其他
              </label>
            </checkbox-group> -->
          </view>
          <view class="min" v-show="showGender">请选择类型</view>
          <view class="uni-form-item uni-column">
            <view class="title title2">电话</view>
            <input class="uni-input" name="phoneNumber" placeholder="可选" />
          </view>
          <view class="min" v-show="showPhone">请正确输入电话号码</view>
          <view class="uni-form-item uni-column">
            <view class="title title2">
              <text class="iconfont icon-bitian icon1"></text>投诉举报内容</view
            >
            <view class="uni-textarea1">
              <textarea
                class="uni-width"
                placeholder-style="color:#666"
                placeholder="请详细描述内容"
                name="content"
              />
            </view>
          </view>
          <view class="min" v-show="showContent">请输入内容</view>
          <view class="uni-btn-v">
            <button plain="true" form-type="submit">提交</button>
            <!-- <button type="default" form-type="reset">Reset</button> -->
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      showName: false,
      showGender: false,
      showPhone: false,
      showContent: false,
      openid: "",
      time: "18:01",
      date: "",
      address: "六号楼",
    };
  },
  onShow() {
    this.dataIndex = 1;
    this.dataIndexOne = 4;
    let getTime = new Date();
    this.time = `${this.appendZero(getTime.getHours())}:${this.appendZero(
      getTime.getMinutes()
    )}`;
    this.date = `${getTime.getFullYear()}-${this.appendZero(
      getTime.getMonth() + 1
    )}-${this.appendZero(getTime.getDate())}`;

    console.log(this.time);
    this.getOpenid();
    // console.log(num + "5555");
  },
  methods: {
    getOpenid() {
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          console.log(res);
          that.openid = res.data;
        },
        fail: (err) => {},
      });
    },
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },

    formSubmit(e) {
      console.log(
        "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      );
      let formdata = e.detail.value;
      console.log(formdata);
      if (formdata.content.length == 0) {
        this.showContent = true;
        // setTimeout(() => {
        //   this.showContent = false;
        // }, 500);
        return;
      }
      let that = this;
      console.log(formdata.phoneNumber.length);
      let phone = !formdata.phoneNumber.length == 0 ? formdata.phoneNumber : -1;
      console.log(phone);
      that
        .$MyRequest({
          url: "/set_complaint",
          method: "POST",
          data: {
            openid: that.openid,
            name: formdata.name,
            state: formdata.state,
            date: that.date,
            phoneNumber: phone,
            content: formdata.content,
          },
        })
        .then((res) => {
          console.log(res);
          uni.navigateBack({ delta: 1 });
        });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.start-repair {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;
}
.info-content {
  // box-sizing: border-box;
  // padding: 0 15rpx;

  margin: 0 15rpx;
  // border-radius: 2%;
  // background-color: $uni-color-mainBg;
  // margin-bottom: 50rpx;
  .info-main {
    padding: 0 15rpx;
    background-color: $uni-color-mainBg;
    box-sizing: border-box;
    .uni-column {
      border-bottom: 1rpx solid #d8d8de;
      padding: 12rpx 0;
      .title {
        // font-size: 55rpx;
        font-size: 30rpx;
        padding: 0 0 15rpx 0;
      }
      .item-content {
        display: flex;
        align-items: center;
        .title {
          // font-size: 55rpx;
          font-size: 30rpx;
          padding: 20rpx 0;
        }

        .item-content-input {
          padding-left: 80rpx;
          .uni-input {
            // padding-left: 40rpx;
            font-size: 30rpx;
            color: #c0c0c0;
          }
          .uni-input-name {
            color: #333;
          }
        }
      }

      // .title {
      //   padding: 30rpx 0;
      // }
    }
    .uni-btn-v {
      padding: 50rpx 0 20rpx 0;
      // border-top: 0 20rpx solid;
      button {
        width: 85%;
        border-radius: 2%;
        font-size: 30rpx;
        color: #fff;
        // size: 10;
        height: 82rpx;
        @include center;
        background-color: $uni-color-primary;
        border: none;
      }
    }
  }
  .info-step {
    // margin-top: 20%;
    width: 100%;
    padding: 30rpx 0;
    box-sizing: border-box;
    // marggn-top: 100rpx;
    // background-color: $uni-color-mainBg;
    .uni-steps {
      // height: 200rpx;
      background-color: $uni-color-mainBg;
      active-color: $uni-color-primary;
      // transform: scale(1.1);
      padding: 60rpx 0;

      box-sizing: border-box;
      // @include center;
      // font-size:80rpx;
    }
  }
  .info-step-test {
    background-color: $uni-color-mainBg;
    padding: 0 0 20rpx 0;
    @include center;
    color: $uni-color-warning;
  }
}
.min {
  font-size: 22rpx;
  color: #fa3534;
  // font-weight: bold;
}
.uni-width {
  // width: 95%;
  width: 100% !important;
  font-size: 30rpx;
  height: 100%;
}
.uni-textarea1 {
  margin: 0 auto;
  // box-sizing: border-box;
  border-radius: 2%;
  background-color: $uni-bg-color-hover;
  padding: 10rpx 15rpx;
  font-size: 12rpx;
  height: 150px;
}
</style>
